<template>
  <div class="app-container">
    <!-- <div class="inputBox">
      <el-input v-model="search.cashOrderNum" class="input" placeholder="请输入单号查询" />
      <el-input v-model="search.orderNum" class="input" placeholder="请输入订单编号查询" />
      <el-input v-model="search.teacherName" class="input" placeholder="请输入申请人查询" />
      <el-input v-model="search.mobilePhone" class="input" placeholder="请输入申请人手机号查询" />
      <el-date-picker v-model="search.startTime" class="startDate" type="date" placeholder="选择开始日期"/>
      <el-date-picker v-model="search.endTime" class="endDate" type="date" placeholder="选择结束日期"/>
      <el-select v-model="search.status" class="teacherStatus" placeholder="请选择提现状态">
        <el-option label="待审核" value="0" />
        <el-option label="待放款" value="1" />
        <el-option label="已放款" value="2" />
        <el-option label="已驳回" value="3" />
      </el-select>
      <el-button type="primary" class="ml10" @click="toSearch">查询</el-button>
      <el-button type="primary" @click="toReset">重置</el-button>
    </div> -->
    <!-- <el-button v-preventReClick type="primary" class="addBtn" @click="add()">新增</el-button><br><br> -->
    <!-- <el-button v-if="setPermissionBtn('/address/add', addBtn)" type="primary" class="addBtn" @click="toaddPage()">{{ addBtn.btnName }}</el-button><br><br> -->
    <h3 class="title">抽佣提现申请</h3>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中请稍后"
      border
      fit
      highlight-current-row>
      <!-- this.prductForm.saleRebate = Math.round((this.prductForm.saleRebate * 100)) -->

      <el-table-column label="提现金额">
        <template slot-scope="scope">
          {{ scope.row.amount }}元
        </template>
      </el-table-column>
      <el-table-column label="提现金额累计时间">
        <template slot-scope="scope">
          {{ scope.row.grandTotalCycle }}
        </template>
      </el-table-column>
      <el-table-column label="提现基数">
        <template slot-scope="scope">
          {{ scope.row.orderTotalAmount }}元
        </template>
      </el-table-column>
      <el-table-column align="center" label="提现比例">
        <template slot-scope="scope">
          {{ Math.round((scope.row.percent * 100)) }}%
        </template>
      </el-table-column>
      <el-table-column label="状态" width="70">
        <template slot-scope="scope">
          <p>{{ scope.row.status|typeStr }}</p>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="created_at" label="操作" width="350">
        <template slot-scope="scope">
          <el-button
            v-if="setPermissionBtn('/platformCommission/record/build', scope.row)"
            v-show="scope.row.status === 0 || scope.row.status === 3"
            size="mini"
            value="申请提现"
            type="success"
            @click="apply(scope.row, scope.$index)">{{ scope.row.btnName }}</el-button>
          <el-button
            v-if="setPermissionBtn('/platformCommission/query/goodsOrder', scope.row)"
            size="mini"
            value="查看月交易订单"
            type="warning"
            @click="checkMonthOrder(scope.row.id, scope.$index)">{{ scope.row.btnName }}</el-button>
          <el-button
            v-if="setPermissionBtn('/platformCommission/refusedReason', scope.row)"
            v-show="scope.row.status === 3"
            size="mini"
            value="查看驳回理由"
            type="danger"
            @click="checkRemarks(scope.row.id, scope.$index)">{{ scope.row.btnName }}</el-button>
          <el-button
            v-if="setPermissionBtn('/platformCommission/loanedVoucher', scope.row)"
            v-show="scope.row.status === 2"
            size="mini"
            value="查看打印凭证"
            type="warning"
            @click="checkVoucer(scope.row.id, scope.$index)">{{ scope.row.btnName }}</el-button>

            <!-- <el-button
            v-if="setPermissionBtn('edit', scope.row)"
            size="mini"
            value="编辑"
            type="primary"
            @click="edit(scope.row, scope.$index)">{{ scope.row.btnName }}</el-button>
          <el-button
            v-if="setPermissionBtn('del', scope.row)"
            :disabled="scope.row.expireStatus === 1"
            size="mini"
            value="删除"
            type="danger"
            @click="del(scope.row.id)">{{ scope.row.btnName }}</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
    <ChoosePlatform
      :settings-visible.sync="dialogTableVisible"
      :dialog-data.sync="rowData"
      :my-index.sync="detailIndex"
      :setting-mode="'applyForCash'"
      @updataParent="submitFn"/>
    <RefusedReason :remark-list="remarkList" :remark-visible.sync="remarkVisible" :remark-index="remarkIndex" />
    <Voucher
      :showdialog.sync="voucherVisible"
      :voucher-data.sync="voucherData"
      :voucher-index.sync="voucherIndex"
      model="platform"
    />
  </div>
</template>

<script>
import { getPlatformCommissionList, createPlatformCommission, getRefusedReason } from '@/api/platformCommission'
import RefusedReason from '@/components/remark/refusedReason'
import Voucher from '@/components/voucher'
import Pagination from '@/components/Pagination'
import { Message } from 'element-ui'
import ChoosePlatform from '@/components/platformCommission/choosePlatform'
// import { getByteLength } from '@/utils/validate'
// const inputValidatorNum = (v) => {
//   console.log(getByteLength(v))
//   if (getByteLength(v) > 600) {
//     return false
//   }
// }
export default {
  components: { Pagination, ChoosePlatform, RefusedReason, Voucher },
  filters: {
    // statusFilter(status) {
    //   const statusMap = {
    //     published: 'success',
    //     draft: 'gray',
    //     deleted: 'danger'
    //   }
    //   return statusMap[status]
    // },
    typeStr(type) {
      const typesMap = {
        0: '未提交',
        1: '待放款',
        2: '已放款',
        3: '已驳回'
      }
      return typesMap[type]
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 0,
        pageSize: 10
      },
      dialogTableVisible: false,
      detailList: [],
      formLabelWidth: '120px',
      detailIndex: -1,
      rowData: {},
      remarkList: [],
      remarkVisible: false,
      remarkIndex: -1,

      voucherVisible: false,
      voucherData: {},
      voucherIndex: -1
    }
  },
  computed: {
    setPermissionBtn() {
      return function(str, row) {
        let index = -1
        const buttonList = this.$store.getters.button
        index = buttonList.findIndex(item => item.value === str)
        // console.log(index)
        if (index !== -1) {
          row.btnName = buttonList[index].name
          return true
        } else {
          return false
        }
      }
    }
  },
  watch: {
    // 'permissionList'(newVal) {
    //   this.permissionList = newVal
    //   this.permissionShow = true
    // }
  },
  created() {
    this.fetchData()
    // this.getPermissonFn()
  },
  mounted() {
    this.getPermissonFn() // 获取按钮权限 vuex的button
  },
  methods: {
    // 查看打款凭证
    checkVoucer(id, index) {
      this.voucherData = { id }
      this.voucherIndex = index
      this.voucherVisible = true
    },
    // 点击申请提现按钮
    apply(row, index) {
      console.log(row)
      this.detailIndex = index
      this.rowData.platformCommissionId = row.id
      this.rowData.amount = row.amount
      this.dialogTableVisible = true
    },
    // 查看驳回理由
    checkRemarks(id, index) {
      console.log('备注id:', id)
      this.remarkIndex = index
      getRefusedReason({ id }).then(res => {
        console.log('查看备注：', res)
        if (res.code === '200') {
          this.remarkList = res.data
          if (this.remarkList.length) {
            this.remarkVisible = true
          } else {
            Message.info('暂无备注')
          }
        }
      })
    },
    // checkMonthOrder
    checkMonthOrder(id) {
      this.$router.push({
        path: '/platformCommission/withdrawalOrder',
        query: {
          platformCommId: id
        }
      })
    },
    submitFn(data) {
      console.log('子组件返回来的数据：', data)
      createPlatformCommission(data).then(res => {
        if (res.code === '200') {
          Message.success('编辑成功')
          this.fetchData();
        } else {
          Message.error(res.message + '-' + res.data)
        }
      })
    },
    remarkText(value) {
      this.fetchData()
    },
    // 查询
    // toSearch() {
    //   if (!this.search.startTime) this.search.startTime = ''
    //   if (!this.search.endTime) this.search.endTime = ''
    //   this.search.startTime = new Date(this.search.startTime).getTime();
    //   this.search.endTime = new Date(this.search.endTime).getTime();
    //   this.listLoading = true
    //   const newData = this.objectCon(this.listQuery, this.search)
    //   getPlatformCommissionList(this.cashType, newData).then(response => {
    //     this.list = response.data.list
    //     this.total = response.data.total
    //     setTimeout(() => {
    //       this.listLoading = false
    //     }, 1.5 * 1000)
    //   })
    // },
    // 重置
    // toReset() {
    //   this.search.cashOrderNum = ''
    //   this.search.orderNum = ''
    //   this.search.teacherName = ''
    //   this.search.mobilePhone = ''
    //   this.search.startTime = ''
    //   this.search.endTime = ''
    //   this.search.status = ''
    // },
    fetchData() {
      this.listLoading = true
      const newData = this.objectCon(this.listQuery)
      getPlatformCommissionList(newData).then(response => {
        console.log(response)
        this.list = response.data.list
        // this.list[0].status = 0
        console.log('response:', this.list)
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-icon-remove {
    margin-left: 10px;
  }
  .img_url {
    width: 110px;
    height: 110px;
  }
  .inputBox{
    div{ margin-bottom: 10px;}
    .input:nth-of-type(1){ width: 160px;}
    .input:nth-of-type(2){ width: 140px;}
    .input:nth-of-type(3){ width: 160px;}
    .teacherType { width: 150px;}
    .teacherSex { width: 120px;}
    .startDate { width: 150px;}
    .endDate { width: 150px;}
    .teacherStatus { width: 150px;}
  }
</style>
